<template>
  <h1>{{ msg }}</h1>
  <h1 class="name">jspang.com</h1>
  <button @click="addCount">count is: {{ pageData.count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script lang="ts">
import "/@/assets/app.css";
// import data from "../assets/jspang.json";
import { reactive, onRenderTracked } from "vue";
const jspang: string = "jspang.com";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const pageData = reactive({
      count: 0,
    });
    const addCount = () => {
      pageData.count += 1;
    };
    onRenderTracked((event) => {
      console.log("状态跟踪组件----------->");
      console.log(event);
    });

    return {
      pageData,
      addCount,
    };
  },
  mounted() {
    console.log(jspang);
  },
};
</script>

<style lang="scss">
.name {
  color: green;
}
</style>
